<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码案例</title>
    <style>
        .v_code {
            width: 600px;
            margin: 0 auto;
        }

        .v_code>input {
            width: 60px;
            height: 36px;
            margin-top: 10px;
        }

        .code_show {
            overflow: hidden;
        }

        .code_show span {
            display: block;
            float: left;
            margin-bottom: 10px;
        }

        .code_show a {
            display: block;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }

        .code {
            font-style: italic;
            background-color: #f5f5f5;
            color: blue;
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            padding: 0 5px;
            text-align: center;
        }

        #inputCode {
            width: 100px;
            height: 30px;
        }

        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
            cursor: pointer;
        }

        a:hover {
            text-decoration: underline;
        }

        .form {
            width: 300px;
            height: 300px;
            background-color: #eee;
        }
    </style>
</head>
<body>
     <div class="v_code">
        <div class="code_show">
            <span class="code" id="checkCode"></span>
            <a id="linkbt">看不清换一张</a>
        </div>
        <div class="input_code">
            <label for="inputCode">验证码：</label>
            <input type="text" id="inputCode" />
            <script>
                //如何随机抽取数组中的元素：
                // Math.random()
                // 作用：生成一个 ​​0 到 1 之间​​（包括0，不包括1）的随机小数
                // 示例结果：0.123、0.456、0.789 等
                // 数学表示：[0, 1)
                // (2) * numbers.length
                // 假设 numbers.length 是 5（数组有5个元素）
                // Math.random() * 5 会产生：
                // 最小值：0 * 5 = 0
                // 最大值：0.999... * 5 ≈ 4.999...
                // 范围：[0, 5)
                // (3) Math.floor()
                // 作用：向下取整（去掉小数部分）
                // 示例：
                // Math.floor(3.2) → 3
                // Math.floor(4.999) → 4
                let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F','G', 'H','I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9','!','@','#','$','%','^','&','*'];
                let yzm = "";//let是可变类型，会自动根据赋值的元素来给出类型，像这里let就是字符串类型
                for(let i = 0; i < 6; i++)
                {
                    yzm = yzm + arr[Math.floor(Math.random() * arr.length)];//可以像C语言的数组一样以arr[i]的方法获取数组元素
                }//js里，默认用户输入均为字符串，字符串和字符串可相加，得到的结果是一个大字符串，这就是创建六位验证码的原理
                document.getElementById("checkCode").innerHTML = yzm;
                let btn = document.getElementById("linkbt");
                btn.onclick = function()
                {
                   yzm = "";
                   for(i = 0; i < 6; i++)
                   {
                        yzm = yzm + arr[Math.floor(Math.random() * arr.length)];
                   }
                    document.getElementById("checkCode").innerHTML = yzm;

                }
            </script>
            <span id="text_show"></span>
        </div>
        <input id="Button1" type="button" value="确定" />
        <!-- 应该把验证函数写在获取 Button1 元素的代码之后 -->
        <script>
            //获取用户输入的验证码
                let but1 = document.getElementById("Button1");
                but1.onclick = function()
                {
                    let inputCode = document.getElementById("inputCode");
                    if(inputCode.value == yzm)
                    {
                        alert("验证码正确");
                    }else{
                        alert("验证码错误");
                    }
                }
        </script>
    </div>
</body>
</html>